<template>
	<view class="info-wrapper">
		<view class="content-wrapper">
			<p>科室名称：{{info.name}}</p>
			<p>地址：{{info.addr}}</p>
			<p>{{info.intro}}</p>
		</view>
		<div style="margin-bottom: 10px;"></div>
		<uni-section title="科室医生" type="line">
			<view style="padding: 8px;">
				<view class="doctor-item" v-for="(item, index) in doctorlist" :key="index" @click="openDoctorInfo(item.id)">
					<p>医生：{{item.name}}【{{item.zc}}】</p>
				</view>
			</view>
		</uni-section>

		<u-modal :show="modalShow" :title="currentDoctor.z_name" @confirm="modalShow = false">
			<view class="slot-content">
				<image :src="currentDoctor.advertisement" style="width: 100px; height: 100px;"/>
				<p>主治：{{currentDoctor.authority}}</p>
				<p>描述：{{currentDoctor.z_content}}</p>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				deptid: '',
				doctorlist: [],
				modalShow: false,
				currentDoctor: {
					name: ''
				}
			}
		},
		onLoad(option) {
			this.deptid = option.id
			this.api_deptintro(this.deptid)
			this.loadDoctorlist(this.deptid)
		},
		methods: {
			api_deptintro(id) {
				this.$app._get('entry/wxapp/faxian.deptintro', {
					id: id
				}, (result) => {
					this.info = result
				})
			},
			loadDoctorlist(deptid) {
				this.$app._get('entry/wxapp/zhuanjia.listbydept', {
					deptid: deptid
				}, (result) => {
					console.log(result)
					this.doctorlist = result
				})
			},
			loadDoctorInfo(docid) {
				this.$app._get('entry/wxapp/zhuanjia.docintro', {
					docid: docid
				}, (result) => {
					console.log(result)
					this.currentDoctor = result
				})
			},
			openDoctorInfo(docid) {
				this.modalShow = true
				this.loadDoctorInfo(docid)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-wrapper {
		box-sizing: border-box;
		padding: 10px;

		.content-wrapper {
			border-radius: 6px;
			border: 1px solid #e3e3e3;
			padding: 10px;
			line-height: 25px;
			background-color: #f5f5f5;
			font-size: .9rem;
			color: #757575;
		}

		.doctor-item {
			background-color: #eeeeee;
			padding: 10px 20px 10px 20px;
			border-radius: 6px;
		}
	}
	
	.slot-content {
		text-align: center;
		p {
			text-align: left !important;
		}
	}
</style>